"use client"; // 标记为客户端组件

import React, { useEffect, useRef } from "react";

interface VideoPlayerProps {
    url: string; // 视频流地址
}

const VideoPlayer: React.FC<VideoPlayerProps> = ({ url }) => {
    const playerRef = useRef<HTMLDivElement | null>(null);

    useEffect(() => {
        if (!playerRef.current) return;

        let isMounted = true; // 标记组件是否已挂载

        // 动态加载 xgplayer 和 xgplayer-hls
        Promise.all([
            import("xgplayer/dist/index.min.css"), // 加载样式
            import("xgplayer"),
            import("xgplayer-hls"),
            import("xgplayer-flv.js"),
        ])
            .then(([_, PlayerModule, HlsPlayerModule, FlvPlayerModule]) => {
                const Player = PlayerModule.default;
                const HlsPlayer = HlsPlayerModule.default;
                const FlvPlayer = FlvPlayerModule.default;

                if (!isMounted || !playerRef.current) return;

                // 初始化播放器
                const player = new Player({
                    el: playerRef.current,
                    url: url, // 视频流地址
                    playsinline: true, // 内联播放
                    // poster: "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg", // 封面图
                    // plugins: [HlsPlayer,FlvPlayer], // 使用 HLS 插件
                    plugins: [HlsPlayer], // 使用 HLS 插件
                    // plugins: [FlvPlayer], // 使用 HLS 插件
                    autoplay: false, // 禁止自动播放
                    fluid: true, // 自适应宽高
                });

                console.log("Player instance created:", player);
            })
            .catch((error) => {
                console.error("Failed to load or initialize xgplayer:", error);
            });

        // 清理函数
        return () => {
            isMounted = false;
        };
    }, [url]);

    return (
        <div
            id="mse"
            ref={playerRef}
            style={{
                width: "100%", // 设置宽度
                height: "100vh", // 设置高度
            }}
        />
    );
};

export default VideoPlayer;